import React from "react";
import styles from "./MusicHeader.module.css";
import { NavLink, useNavigate } from "react-router-dom";

export const MusicHeader = () => {
  return (
    <div className={styles.header}>
      <a href="#" className={styles.logo}>
        <img src="/icon.png" alt="logo" />
      </a>

      <div className={styles.space}></div>

      <div className={styles.inputBox}>
        <img src="/search.svg" alt="search png" />
        <input placeholder="search keyword" />
      </div>

      <div className={styles.space}></div>

      <div className={styles.links}>
        <NavLink to={"/music"}>
          <span>enjoy</span>
        </NavLink>
        <div className={styles.line}></div>
        <NavLink to={"/songManagement"}>
          <span>management</span>
        </NavLink>
      </div>
    </div>
  );
};
